<template>
  <div class="page-container">
    <el-card class="asset-card main-card">
      <!-- <div class="asset-container">
        <div class="asset-item">
          <div class="asset-icon" style="background: rgba(128, 128, 255, 0.1); color: #6262f1">
            <el-icon>
              <Wallet />
            </el-icon>
          </div>
          <div class="asset-content">
            <div class="asset-label">FastTRX余额</div>
            <div class="asset-value">{{ apiData.fasttrxBalance }}</div>
          </div>
        </div>

        <div class="asset-item">
          <div class="asset-icon" style="background: rgba(45, 140, 240, 0.1); color: #2d8cf0">
            <el-icon>
              <CreditCard />
            </el-icon>
          </div>
          <div class="asset-content">
            <div class="asset-label">钱包地址</div>
            <div class="asset-value">
                <CopyableAddressVue :value="apiData.walletAddress" />
            </div>
          </div>
        </div>

        <div class="asset-item">
          <div class="asset-icon" style="background: rgba(255, 153, 0, 0.1); color: #ff9900">
            <el-icon>
              <Money />
            </el-icon>
          </div>
          <div class="asset-content">
            <div class="asset-label">钱包余额</div>
            <div class="asset-value">
              {{ formatBalance(apiData.walletBalance) }}
            </div>
          </div>
        </div>

        <div class="asset-item">
          <div class="asset-icon" style="background: rgba(25, 190, 107, 0.1); color: #19be6b">
            <el-icon>
              <User />
            </el-icon>
          </div>
          <div class="asset-content">
            <div class="asset-label">USDT余额</div>
            <div class="asset-value">
              {{ formatBalance(apiData.walletUsdtBalance) }}
            </div>
          </div>
        </div>
        <div class="asset-item">
          <div class="asset-icon" style="background: rgba(255, 107, 107, 0.1); color: #ff6b6b">
            <el-icon>
              <Money />
            </el-icon>
          </div>
          <div class="asset-content">
            <div class="asset-label">今日支出(TRX)</div>
            <div class="asset-value">
              {{ (apiData.todayTRXExpense) }}
            </div>
          </div>
        </div>
        <div class="asset-item">
          <div class="asset-icon" style="background: rgba(70, 128, 255, 0.1); color: #4680ff">
            <el-icon>
              <Top />
            </el-icon>
          </div>
          <div class="asset-content">
            <div class="asset-label">今日总收入(TRX)</div>
            <div class="asset-value">
              {{ formatBalance(apiData.todayTRXIncome) }}
            </div>
          </div>
        </div>
        <div class="asset-item">
          <div class="asset-icon" style="background: rgba(154, 84, 245, 0.1); color: #9a54f5">
            <el-icon>
              <User />
            </el-icon>
          </div>
          <div class="asset-content">
            <div class="asset-label">今日总收入(USDT)</div>
            <div class="asset-value">
              {{ formatBalance(apiData.todayUSDTIncome) }}
            </div>
          </div>
        </div>
        <div class="asset-item">
          <div class="asset-icon" style="background: rgba(255, 153, 0, 0.1); color: #ff9900">
            <el-icon>
              <Document />
            </el-icon>
          </div>
          <div class="asset-content">
            <div class="asset-label">系统剩余笔数</div>
            <div class="asset-value">
              {{ apiData.remainingTransactionCount }}
            </div>
          </div>
        </div>
      </div> -->
      <div class="asset-container">
        <!-- 钱包信息（地址+余额+USDT） -->
        <div class="asset-item">
          <div
            class="asset-icon"
            style="background: rgba(45, 140, 240, 0.1); color: #2d8cf0"
          >
            <el-icon>
              <CreditCard />
            </el-icon>
          </div>
          <div class="multi-asset-content">
            <div class="multi-asset-row">
              <div class="asset-label">钱包地址</div>
              <div class="asset-value">
                <CopyableAddressVue :value="apiData.walletAddress" />
              </div>
            </div>
            <div class="multi-asset-row">
              <div class="asset-label">钱包余额</div>
              <div class="asset-value">
                {{ formatBalance(apiData.walletBalance) }}
              </div>
            </div>
            <div class="multi-asset-row">
              <div class="asset-label">USDT余额</div>
              <div class="asset-value">
                {{ formatBalance(apiData.walletUsdtBalance) }}
              </div>
            </div>
          </div>
        </div>

        <!-- 今日收支信息 -->
        <!-- <div class="asset-item">
          <div class="asset-icon" style="background: rgba(255, 153, 0, 0.1); color: #ff9900">
            <el-icon>
              <Money />
            </el-icon>
          </div>
          <div class="multi-asset-content">
            <div class="multi-asset-row">
              <div class="asset-label">今日支出(TRX)</div>
              <div class="asset-value">{{ apiData.todayTRXExpense }}</div>
            </div>
            <div class="multi-asset-row">
              <div class="asset-label">今日总收入(TRX)</div>
              <div class="asset-value">{{ formatBalance(apiData.todayTRXIncome) }}</div>
            </div>
            <div class="multi-asset-row">
              <div class="asset-label">今日总收入(USDT)</div>
              <div class="asset-value">{{ formatBalance(apiData.todayUSDTIncome) }}</div>
            </div>
          </div>
        </div> -->
        <div class="asset-item">
          <div
            class="asset-icon"
            style="background: rgba(255, 153, 0, 0.1); color: #ff9900"
          >
            <el-icon>
              <Money />
            </el-icon>
          </div>
          <div class="multi-asset-content">
            <div class="multi-asset-row vertical-layout">
              <div class="asset-label">今日支出(TRX) /</div>
              <div class="asset-value">{{ apiData.todayTRXExpense }}</div>
            </div>
            <div class="multi-asset-row vertical-layout">
              <div class="asset-label">今日总收入(TRX) /</div>
              <div class="asset-value">
                {{ formatBalance(apiData.todayTRXIncome) }}
              </div>
            </div>
            <div class="multi-asset-row vertical-layout">
              <div class="asset-label">今日总收入(USDT)</div>
              <div class="asset-value">
                {{ formatBalance(apiData.todayUSDTIncome) }}
              </div>
            </div>
          </div>
        </div>
        <!-- 系统剩余笔数 -->
        <div class="asset-item">
          <div
            class="asset-icon"
            style="background: rgba(255, 153, 0, 0.1); color: #ff9900"
          >
            <el-icon>
              <Document />
            </el-icon>
          </div>
          <div class="asset-content">
            <div class="asset-label">系统剩余笔数</div>
            <div class="asset-value">
              {{ apiData.remainingTransactionCount }}
            </div>
          </div>
        </div>
        <!-- FastTRX余额 -->

        <div class="asset-item">
          <div
            class="asset-icon"
            style="background: rgba(128, 128, 255, 0.1); color: #6262f1"
          >
            <el-icon>
              <Wallet />
            </el-icon>
          </div>
          <div class="asset-content">
            <div class="asset-label">FastTRX余额</div>
            <div class="asset-value">{{ apiData.fasttrxBalance }}</div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="dashboard secondary-card">
      <div>
        <!-- <div class="header">
          <h3>业务数据概览</h3>
          <div class="date-time">
            <div class="date">{{ formattedDate }}</div>
          </div>
        </div> -->

        <div class="stats-container">
          <div class="stat-card">
            <div class="highlight highlight-1"></div>
            <div class="card-title">
              <div
                class="card-icon"
                style="background: rgba(45, 140, 240, 0.1); color: #2d8cf0"
              >
                <el-icon>
                  <Money />
                </el-icon>
              </div>
              代理数量(个)
            </div>
            <div class="card-content">
              <div class="card-value">
                <div
                  style="
                    font-size: small;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  总共:
                </div>
                {{ apiData.agencyCount }}
              </div>
              <div class="today-increment">
                <span class="increment-label">今日新增：</span>
                <span class="increment-value">{{
                  formatGrowthRate("agency")
                }}</span>
              </div>
            </div>
          </div>

          <div class="stat-card">
            <div class="highlight highlight-2"></div>
            <div class="card-title">
              <div
                class="card-icon"
                style="background: rgba(25, 190, 107, 0.1); color: #19be6b"
              >
                <el-icon>
                  <User />
                </el-icon>
              </div>
              用户数量(人)
            </div>
            <div class="card-content">
              <div class="card-value">
                <div
                  style="
                    font-size: small;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  总共:
                </div>
                {{ apiData.userCount }}
              </div>
              <div class="today-increment">
                <span class="increment-label">今日新增：</span>
                <span class="increment-value">{{
                  formatGrowthRate("user")
                }}</span>
              </div>
            </div>
          </div>

          <div class="stat-card">
            <div class="highlight highlight-3"></div>
            <div class="card-title">
              <div
                class="card-icon"
                style="background: rgba(255, 153, 0, 0.1); color: #ff9900"
              >
                <el-icon>
                  <Wallet />
                </el-icon>
              </div>
              闪充订单数量(笔)
            </div>
            <div class="card-content">
              <div class="card-value">
                <div
                  style="
                    font-size: small;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  总共:
                </div>
                {{ apiData.orderFastCount }}
              </div>
              <div class="today-increment">
                <span class="increment-label">今日新增：</span>
                <span class="increment-value">{{
                  formatGrowthRate("orderFast")
                }}</span>
              </div>
            </div>
          </div>

          <div class="stat-card">
            <div class="highlight highlight-4"></div>
            <div class="card-title">
              <div
                class="card-icon"
                style="background: rgba(237, 63, 20, 0.1); color: #ed3f14"
              >
                <el-icon>
                  <CreditCard />
                </el-icon>
              </div>
              笔数订单数量(笔)
            </div>
            <div class="card-content">
              <div class="card-value">
                <div
                  style="
                    font-size: small;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  总共:
                </div>
                {{ apiData.orderPenCount }}
              </div>
              <div class="today-increment">
                <span class="increment-label">今日新增：</span>
                <span class="increment-value">{{
                  formatGrowthRate("orderPen")
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 图表区域 -->
    <el-card   class="chart-card secondary-card">
      <el-skeleton :rows="5" animated v-if="loading" />
      <div id="trendChart" style="width: 100%; height: 300px"></div>
    </el-card>
  </div>
</template>
<script>
import { ref, onMounted, onUnmounted, reactive } from "vue";
import * as echarts from "echarts";
import {
  Money,
  User,
  Wallet,
  CreditCard,
  Top,
  Bottom,
  Minus,
} from "@element-plus/icons-vue"; // 添加Bottom和Minus图标
import api from "../network/api";
import CopyableAddressVue from "../components/CopyableAddress.vue";
import { ElMessage } from "element-plus";
export default {
  components: {
    Money,
    User,
    Wallet,
    CreditCard,
    // Top,
    // Bottom, // 注册Bottom组件
    // Minus, // 注册Minus组件
    CopyableAddressVue,
  },

  setup() {
    const loading = ref(false);
    const cardData = [];
    const formattedDate = ref("");
    let trendChart = null;

    const apiData = reactive({
      agencyCount: "0",
      userCount: "0",
      orderFastCount: "0",
      orderPenCount: "0",
      agencyTrend: {},
      userTrend: {},
      orderFastTrend: {},
      orderPenTrend: {},
    });

    // 存储增长率的响应式对象
    const growthRates = reactive({
      agency: 0,
      user: 0,
      orderFast: 0,
      orderPen: 0,
    });
    const formatBalance = (balance) => {
      // 检查是否为空值（null、undefined或空字符串）
      if (balance == null || balance === "") {
        return 0;
      }

      return Number(balance / 1e6).toLocaleString("zh-CN", {
        maximumFractionDigits: 10,
      });
    };
    // 更新时间的函数
    const updateTime = () => {
      const now = new Date();

      // 格式化日期：YYYY年MM月DD日
      formattedDate.value =
        now
          .toLocaleDateString("zh-CN", {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
          })
          .replace(/\//g, "年")
          .replace(/\//g, "月") + "日";
    };

    // 设置定时器每秒更新时间
    let timer;

    // 计算增长率
    const calculateGrowthRate = (trendData) => {
      const dates = Object.keys(trendData).sort();
      if (dates.length < 2) return 0;

      const lastDate = dates[dates.length - 1];
      const prevDate = dates[dates.length - 2];

      const currentValue = parseFloat(trendData[lastDate]);
      const prevValue = parseFloat(trendData[prevDate]);

      // if (prevValue === 0) {
      //   return currentValue > 0 ? 100 : 0;
      // }

      // return ((currentValue - prevValue) / prevValue) * 100;
      return currentValue - prevValue;
    };

    // 格式化增长率显示 - 修改后只显示最后一天的数据
    const formatGrowthRate = (type) => {
      const trendData = apiData[`${type}Trend`];
      const dates = Object.keys(trendData).sort();
      if (dates.length === 0) return "0";

      const lastDate = dates[dates.length - 1];
      const value = parseFloat(trendData[lastDate]);

      // 确保数据大于等于0，没有负数
      return Math.max(0, value).toFixed(0);
    };

    // 获取图表数据
    const fetchChartData = async () => {
      loading.value = true;
      try {
        const res = await api.user_screen();
        if (res.data.code === 99999 && res.data.success) {
          const data = res.data.data;

          // 更新统计数据
          Object.assign(apiData, {
            agencyCount: data.agencyCount,
            userCount: data.userCount,
            orderFastCount: data.orderFastCount,
            orderPenCount: data.orderPenCount,
            agencyTrend: data.agencyTrend,
            userTrend: data.userTrend,
            orderFastTrend: data.orderFastTrend,
            orderPenTrend: data.orderPenTrend,
            fasttrxBalance: data.fasttrxBalance,
            walletAddress: data.walletAddress,
            walletBalance: data.walletBalance,
            walletUsdtBalance: data.walletUsdtBalance,
            todayTRXExpense: data.todayTRXExpense,
            todayTRXIncome: data.todayTRXIncome,
            todayUSDTIncome: data.todayUSDTIncome,
            remainingTransactionCount: data.remainingTransactionCount,
          });

          // 计算增长率
          growthRates.agency = calculateGrowthRate(data.agencyTrend);
          growthRates.user = calculateGrowthRate(data.userTrend);
          growthRates.orderFast = calculateGrowthRate(data.orderFastTrend);
          growthRates.orderPen = calculateGrowthRate(data.orderPenTrend);

          // 处理图表数据
          const dates = Object.keys(data.agencyTrend).sort();
          const seriesData = [
            {
              name: "代理数量",
              type: "line",
              data: dates.map((date) => data.agencyTrend[date]),
            },
            {
              name: "用户数量",
              type: "line",
              data: dates.map((date) => data.userTrend[date]),
            },
            {
              name: "闪充订单",
              type: "line",
              data: dates.map((date) => data.orderFastTrend[date]),
            },
            {
              name: "笔数订单",
              type: "line",
              data: dates.map((date) => data.orderPenTrend[date]),
            },
          ];

          // 渲染图表
          renderChart(dates, seriesData);
        } else {
          ElMessage.error(res.data.msg || "获取数据失败");
        }
      } catch (error) {
        console.error("获取数据出错:", error);
        ElMessage.error("请求失败，请稍后重试");
      } finally {
        loading.value = false;
      }
    };

    // 渲染图表函数
    const renderChart = (dates, seriesData) => {
      if (!trendChart) return;

      const option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["代理数量", "用户数量", "闪充订单", "笔数订单"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: dates,
        },
        yAxis: {
          type: "value",
        },
        series: seriesData,
      };

      trendChart.setOption(option);
    };
    const handleWindowResize = () => {
      if (trendChart) {
        trendChart.resize();
      }
    };
    onMounted(() => {
      updateTime();
      timer = setInterval(updateTime, 1000);

      // 初始化图表
      const chartDom = document.getElementById("trendChart");
      if (chartDom) {
        trendChart = echarts.init(chartDom);
        fetchChartData();

        // 响应窗口大小变化
        window.addEventListener("resize", handleWindowResize);
      }
    });

    onUnmounted(() => {
      if (timer) clearInterval(timer);

      // 销毁图表实例
      if (trendChart) {
        window.removeEventListener("resize", handleWindowResize);
        trendChart.dispose();
        trendChart = null;
      }
    });

    return {
      apiData,
      cardData,
      formattedDate,
      loading,
      growthRates,
      formatGrowthRate,
      formatBalance,
    };
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  min-height: 100vh;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-container {
  // background: #f5f7fa;
  background: #fff;
  height: 90vh;
  overflow: hidden;
  overflow-y: scroll;
  padding: 15px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 6px;
  }
}

.main-card {
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(98, 98, 241, 0);
  // border-top: 5px solid rgba(98, 98, 241, 0.3);
  // border-top: 5px solid #6262f1;
  // background: linear-gradient(to bottom, #ffffff, #f9faff);
  order: -1;
  /* 确保显示在最前面 */
}

.secondary-card {
  border-radius: 12px;
  // box-shadow: 0 4px 12px rgba(37, 9, 9, 1);
  background: #ffffff;
  // opacity: 0.95;
  border: 1px solid #ebeef5;
}

// .dashboard {
//   width: 100%;
//   // max-width: 1200px;
//   background: white;
//   border-radius: 3px;
//   // overflow-y: auto;
//   // height: 100vh;
//   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
//   overflow: hidden;
// }

.header {
  padding: 24px 32px;
  background: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h3 {
  font-size: 20px;
  font-weight: 400;
  color: #1f2d3d;
}

.header .date {
  color: #5e6d82;
  font-size: 14px;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  // padding:10px 32px ;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  // transition: all 0.3s ease;
  border: 1px solid #ebeef5;
  position: relative;
  overflow: hidden;
}

// .stat-card:hover {
//   transform: translateY(-5px);
//   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
// }

.card-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 20px;
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.card-value {
  font-size: 28px;
  font-weight: 700;
  color: #1f2d3d;
}

.today-increment {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(103, 194, 58, 0.15);
  color: #67c23a;
  white-space: nowrap;
}

.increment-label {
  margin-right: 4px;
  font-size: 12px;
}

.increment-value {
  font-weight: bold;
  font-size: 14px;
}

.footer {
  padding: 24px 32px;
  background: #f8fafc;
  border-top: 1px solid #eee;
  text-align: center;
  color: #99a9bf;
  font-size: 14px;
}

@media (max-width: 768px) {
  .stats-container {
    grid-template-columns: 1fr;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
  }

  // .date-time {
  //   margin-top: 12px;
  //   align-items: flex-start;
  // }
  .date-time {
    align-items: flex-start;
    margin-top: 12px;

    // .date, .time {
    //   font-size: 14px;
    // }
  }
}

.date-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .date {
    font-size: 16px;
    color: #606266;
    margin-bottom: 4px;
  }

  .time {
    font-size: 18px;
    font-weight: bold;
    color: #1f2d3d;
    letter-spacing: 1px;
  }
}

.chart-container {
  padding: 0 32px 32px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #1f2d3d;
}

.chart-placeholder {
  height: 300px;
  background: #f8fafc;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #99a9bf;
  border: 1px dashed #dcdfe6;
}

.highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
}

// .highlight-1 {
//   background: linear-gradient(to bottom, #36b3ff, #2d8cf0);
// }

// .highlight-2 {
//   background: linear-gradient(to bottom, #19be6b, #13ce66);
// }

// .highlight-3 {
//   background: linear-gradient(to bottom, #ff9900, #ffba00);
// }

// .highlight-4 {
//   background: linear-gradient(to bottom, #ed3f14, #ff6b6b);
// }

.chart-card {
  margin-top: 10px;
}

.page-container {
  // background: #e3d4d4;
  height: 90vh;
  overflow: hidden;
  //添加滚动条
  overflow-y: scroll;

  &::-webkit-scrollbar {
    width: 1px;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(248, 248, 250, 0.2);
    border-radius: 6px;
    transition: background 0.3s;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
}

@media screen and (max-width: 768px) {
  .page-container {
    // padding: 0 10px;
    height: 90vh;
    overflow: hidden;
    //添加滚动条
    overflow-y: scroll;
    // margin-bottom: 30px;
  }
}

// .asset-card {
//   margin-bottom: 10px;

//   .asset-container {
//     display: grid;
//     grid-template-columns: repeat(4, 1fr);
//     gap: 15px;
//     padding: 0;
//   }

//   .asset-item {
//     display: flex;
//     align-items: center;
//     padding: 15px;
//     border-radius: 8px;
//     background: #fff;
//     // background: #f9fafc;
//     transition: all 0.3s ease;
//     border: 1px solid #ebeef5;

//     &:hover {
//       transform: translateY(-3px);
//       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
//     }
//   }

//   .asset-icon {
//     width: 40px;
//     height: 40px;
//     border-radius: 8px;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     margin-right: 15px;
//     font-size: 18px;
//   }

//   .asset-content {
//     display: flex;
//     flex-direction: column;
//   }

//   .asset-label {
//     font-size: 13px;
//     // color: #606266;
//     color: #606266;
//     margin-bottom: 5px;
//     font-weight: 500;
//   }

//   .asset-value {
//     font-size: 16px;
//     font-weight: bold;
//     color: #1f2d3d;
//     word-break: break-all;
//   }
// }
.asset-card {
  margin-bottom: 10px;
  // border-radius: 12px;
  // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  // border: none;

  .asset-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    // padding: 15px;
  }

  .asset-item {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    background: #fff;
    // transition: all 0.3s ease;
    border: 1px solid #ebeef5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    min-height: 120px;
    /* 固定最小高度 */
    height: 100%;
    /* 确保高度一致 */

    // &:hover {
    //   transform: translateY(-5px);
    //   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    //   // border-color: #d0d7e6;
    // }
  }

  .asset-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    font-size: 22px;
    flex-shrink: 0;
  }

  .asset-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
  }

  .asset-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
    font-weight: 500;
    white-space: nowrap;
  }

  .asset-value {
    font-size: 18px;
    font-weight: 700;
    color: #1f2d3d;
    word-break: break-all;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 限制最多2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.dashboard {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  // margin-bottom: 20px;
}

.chart-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* 移动端适配 */
@media (max-width: 992px) {
  .asset-card .asset-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-container {
    padding: 10px;
    gap: 15px;
  }
}

@media (max-width: 768px) {
  // .asset-card .asset-container {
  //   grid-template-columns: 1fr;
  // }

  // .asset-card .asset-item {
  //   padding: 18px;
  // }

  // .asset-card .asset-icon {
  //   width: 45px;
  //   height: 45px;
  //   font-size: 20px;
  // }

  // .asset-card .asset-value {
  //   font-size: 18px;
  // }
  .asset-card .asset-container {
    grid-template-columns: 1fr;
  }

  .asset-card .asset-item {
    padding: 18px;
    min-height: 110px;
  }

  .asset-card .asset-icon {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }

  .asset-card .asset-value {
    font-size: 16px;
  }

  .dashboard .stats-container {
    grid-template-columns: 1fr;
  }
}

/* 新增样式 */
.multi-asset-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.multi-asset-row {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  width: 100%;
  // margin-bottom: 8px;

  &:last-child {
    margin-bottom: 0;
  }
}

/* 调整asset-item高度以适应多行内容 */
.asset-item {
  min-height: 140px;
  /* 增加高度以容纳多行内容 */
  height: auto;
}

/* 移动端适配调整 */
@media (max-width: 992px) {
  .asset-card .asset-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .asset-card .asset-container {
    grid-template-columns: 1fr;
  }

  .asset-item {
    min-height: 130px;
  }

  .multi-asset-row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;

    .asset-value {
      margin-top: 4px;
    }
  }
}

.multi-asset-row.vertical-layout {
  flex-direction: column;
  align-items: flex-start;

  .asset-label {
    // margin-bottom: 4px;
    // font-size: 13px;
    // color: #606266;
  }

  .asset-value {
    // font-size: 16px;
    // font-weight: bold;
    // color: #1f2d3d;
  }
}

/* 调整今日收支信息的布局 */
.asset-item:nth-child(2) .multi-asset-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  width: 100%;
}

@media (max-width: 1200px) {
  .asset-item:nth-child(2) .multi-asset-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px) {
  .asset-item:nth-child(2) .multi-asset-content {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .asset-item:nth-child(2) .multi-asset-content {
    grid-template-columns: 1fr;
  }
}
</style>
